<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>办公无纸化系统</title>

<!-- 最新的 Bootstrap 核心 css 文件 -->
<!-- 在url上 使用 @标签 可以帮我们 自动加上 contextpath -->
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script th:src="@{/js/common/jquery-3.4.1.min.js}" ></script>
<script th:src="@{/js/bootstrap.min.js}" ></script>
</head>
<body>

<!--  导航栏开始↓ -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/index">首页</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          人力资源 <span class="caret"></span>
          </a>
        
          <ul class="dropdown-menu">
            <li><a href="/account/list">员工列表</a></li>
          </ul>
          
        </li>
      </ul>

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          系统设置 <span class="caret"></span>
          </a>
        
          <ul class="dropdown-menu">
            <li><a href="/manager/accountList">账号列表</a></li>
            <li><a href="/manager/roleList"> 角色管理</a></li>
            <li><a href="/manager/permissionList">权限管理</a></li>
          </ul>
          
        </li>
      </ul>
      
      
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="请输入员工姓名或工号">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>

     <!--  未登录用户 -->
      <ul th:if="${session.account} ==null" class="nav navbar-nav navbar-right">
        <li><a href="/account/register">注册</a></li>
        <li><a href="/account/login">登录</a></li>
      </ul>
      
     
       <!-- 已登录用户↓ -->
      <ul th:if="${session.account} !=null" class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          
          欢迎你 : [[${session.account.loginName}]] <span class="caret"></span> </a>
          <ul class="dropdown-menu">
            <li><a href="/account/profile">个人信息</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="/account/logOut">退出登录</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</nav>


<!--导航栏结束-->
<h1>权限管理</h1>
<a class="btn btn-default" href="/manager/permissionAdd">添加权限</a>
<!--  列表开始↓ -->
<table class="table table-hover">
 <tr>  
 	<th>序号</th>
 	<th>id</th>
 	<th>权限名</th>
 	<th>c</th>
 	<th>r</th>
 	<th>u</th>
 	<th>d</th>
 	<th>操作</th>
 </tr>
 <tr th:each="item : ${page.list}">
 	<td th:text="${itemStat.count}"></td>
 	<td th:text="${item.id}">工号</td>
 	<td th:text="${item.name}">loginName</td>
 	<td th:text="${item.c}">c</td>
 	<td th:text="${item.r}">u</td>
 	<td th:text="${item.u}">r</td>
 	<td th:text="${item.d}">d</td>
 	<td>

		<a class="btn btn-danger" th:href = "@{'javascript:deleteById('+${item.id}+');'}">删除</a>
		<a class="btn btn-danger" th:href = "@{'javascript:modify('+${item.id}+');'}">修改</a>
    </td>

 </tr>
</table>

<nav aria-label="Page navigation">
  <ul class="pagination">

    <li th:class="${page.prePage} == 0?'disabled' :'' ">
      <a th:href="@{${page.prePage} == 0?'javascript:void(0);' :'/manager/permissionList?pageNum='+${page.prePage}}" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>

    <li th:each="pageNum : ${page.navigatepageNums}"><a th:href="@{'/manager/permissionList?pageNum='+${pageNum}}">[[${pageNum}]]</a></li>

    <li>
      <a th:href="@{'/manager/permissionList?pageNum='+${page.nextPage}}" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

<div id="com-alert" class="modal" style="z-index:9999;display: none;" >
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
      </div>
      <div class="modal-body small">
        <p>[Message]</p>
      </div>
      <div class="modal-footer" >
        <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
        <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
      </div>
    </div>
  </div>
</div>

<!--列表结束↑ -->
<script type="text/javascript">

  function deleteById(id){
    console.log("id:" + id)
    // 直接连接的方式 访问 controller里的删除方法
    // 异步通过ajax 去访问 带有json访问结果的controller

    showConfirm("确定删除吗?", function() {
      // 确认删除
      var url = "/manager/deletePermissionById";
      var args = {id:id};
      // RESPStat 类型的结果
      $.post(url,args,function(data){
        console.log(data)
        if (data.code == 200){
          //删除成功，刷新页面
          window.location.reload();
        }else {
          alert(data.msg)
        }
      });
    });

  }

  function modify (id){

      window.location.href = "/manager/permissionModify?id="+ id

  }

  $(function () {
        window.Modal = function () {
          var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
          var alr = $("#com-alert");
          var ahtml = alr.html();

          var _tip = function (options, sec) {
              alr.html(ahtml);    // 复原
              alr.find('.ok').hide();
              alr.find('.cancel').hide();
              alr.find('.modal-content').width(500);
              _dialog(options, sec);

              return {
                  on: function (callback) {
                  }
              };
          };

          var _alert = function (options) {
            alr.html(ahtml);  // 复原
            alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
            alr.find('.cancel').hide();
            _dialog(options);

            return {
              on: function (callback) {
                if (callback && callback instanceof Function) {
                  alr.find('.ok').click(function () { callback(true) });
                }
              }
            };
          };

          var _confirm = function (options) {
            alr.html(ahtml); // 复原
            alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
            alr.find('.cancel').show();
            _dialog(options);

            return {
              on: function (callback) {
                if (callback && callback instanceof Function) {
                  alr.find('.ok').click(function () { callback(true) });
                  alr.find('.cancel').click(function () { return; });
                }
              }
            };
          };

          var _dialog = function (options) {
            var ops = {
              msg: "提示内容",
              title: "操作提示",
              btnok: "确定",
              btncl: "取消"
            };

            $.extend(ops, options);

            var html = alr.html().replace(reg, function (node, key) {
              return {
                Title: ops.title,
                Message: ops.msg,
                BtnOk: ops.btnok,
                BtnCancel: ops.btncl
              }[key];
            });

            alr.html(html);
            alr.modal({
              width: 250,
              backdrop: 'static'
            });
          }

          return {
            tip: _tip,
            alert: _alert,
            confirm: _confirm
          }

        }();
      });

  function showTip(msg, sec, callback){
    if(!sec) {
        sec = 1000;
    }
    Modal.tip({
        title:'提示',
        msg: msg
    }, sec);
    setTimeout(callback, sec);
  }

  /**
  * 显示消息
  * @param msg
  */
  function showMsg(msg, callback){
    Modal.alert({
        title:'提示',
        msg: msg,
        btnok: '确定'
    }).on(function (e) {
        if(callback){
            callback();
        }
     });
  }

  /**
  * 模态对话框
  * @param msg
  * @returns
  */
  function showConfirm(msg,callback){
    //var res = false;
    Modal.confirm(
      {
          title:'提示',
          msg: msg,
      }).on( function (e) {
          callback();
          //res=true;
      });
    //return res;
  }

</script>

</body>
</html>